<div id="formDiv"></div>
<script type="text/html" id="formContent">
  <form lay-filter="warehouseOutboundRecordForm" id="warehouseOutboundRecordForm" class="layui-form open-form">
    <div class="open-model">
      <div class="open-auto">
        <div>
          <div class="layui-form-item layui-row">
            <input name="id" type="hidden" />
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">选择提货订单编号</label>
              <input name="warehouseOutboundOrderCode" id="warehouseOutboundOrderCode" type="hidden"  lay-search required />
              <div class="layui-input-block">
                <select id="warehouseOutboundOrderId" name="warehouseOutboundOrderId"  lay-search required lay-filter="warehouseOutboundOrderId"></select>
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">货主代码</label>
              <input name="customerName" id="customerName" type="hidden" />
              <input name="customerId" id="customerId" type="hidden" />
              <div class="layui-input-block">
                <input type="text" class="layui-input" disabled name="costomerCode" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">客户单号(外部单号)</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" id="billLadingNumber" disabled name="billLadingNumber" />
              </div>
            </div>

            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">计划提货时间</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" id="plannerdPickupTime" disabled name="plannerdPickupTime" />
              </div>
            </div>
          </div>
          <div class="layui-form-item layui-row">
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">本次发货物料数</label>
              <div class="layui-input-block">
                <input class="layui-input adv-disable" id="numberOfMaterials" disabled name="numberOfMaterials" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">发货总毛重</label>
              <div class="layui-input-block">
                <input class="layui-input adv-disable" id="totalGrossWeight" disabled name="totalGrossWeight" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">发货总净重</label>
              <div class="layui-input-block">
                <input class="layui-input adv-disable" id="totalNetWeight" disabled name="totalNetWeight" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">总托管费</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input adv-disable" id="totalCustodyFee" disabled name="totalCustodyFee" />
              </div>
            </div>
          </div>
          <!-- {{# if(d.eventName === 'detail'){ }} -->
          <div class="layui-form-item layui-row">
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">提货人</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input adv-disable" id="creatorName" disabled name="creatorName" />
              </div>
            </div>
            <div class="layui-inline layui-col-md3">
              <label class="layui-form-label">提货时间</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" id="createTime" disabled name="createTime" />
              </div>
            </div>
          </div>
          <!-- {{# } }} -->
        </div>
        <div>
          <div>提货物流信息</div>
          <div class="layui-form-item layui-row">
            <input name="id" type="hidden" />
            <div class="layui-form-item layui-row">
              <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">提货方式</label>
                <div class="layui-input-block">
                  <select id="deliveryMethod" name="deliveryMethod" disabled lay-filter="deliveryMethod"></select>
                </div>
              </div>
              <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">提货运单号</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" id="deliveryWaybilNumber" disabled name="deliveryWaybilNumber" />
                </div>
              </div>
              <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">提货车牌号</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" id="deliveryPlateNumber" disabled name="deliveryPlateNumber" />
                </div>
              </div>
              <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">车辆排放标准</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" id="vehicleEmissionStandards" disabled name="vehicleEmissionStandards" />
                </div>
              </div>
            </div>
            <div class="layui-form-item layui-row">
              <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">提货司机</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" id="deliveryDriver" disabled name="deliveryDriver" />
                </div>
              </div>
              <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">提货电话</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" id="deliveryPhone" disabled name="deliveryPhone" />
                </div>
              </div>
              <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">司机身份证</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" id="driverIdCard" disabled name="driverIdCard" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-form-item tableContent">
          <!-- {{# if(d.eventName !== 'detail'){ }} -->
          <button class="layui-btn" type="button" id="Configure">重置（还原列表）</button>
          <!-- {{# } }} -->
          <table class="layui-table" id="purchasePlanFormTable" lay-filter="purchasePlanFormTable"></table>
        </div>

        <div class="layui-form-item text-right">
          <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
          <button class="layui-btn" lay-filter="inquiryOrderInformationSubmit" type="button" lay-submit>提交</button>
        </div>
      </div>
    </div>
  </form>
</script>

<script type="text/html" id="purchasePlanFormTableBar">
  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" type="button">删除</button>
</script>
<script>
  layui.use(["layer", "form", "table", "admin", "laydate", "upload", "laytpl"], async function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;
    let laydate = layui.laydate;
    let laytpl = layui.laytpl;
    const nowData = { ...parentData };
    let data = nowData?.data;
    let skuList = [];

    laytpl(formContent.innerHTML).render({ ...nowData }, function (html) {
      $("#formDiv").after(html);
    });
    if (nowData.eventName === "detail") {
      admin.setFormDisable("#warehouseOutboundRecordForm", true);
    }
    await admin.initDataSelectPro(
      "warehouse/warehouse/admin/outboundOrder/list?status=3",
      { limit: 99999 },
      "warehouseOutboundOrderId",
      "订单编号",
      async (d, obj) => {
        if (d.value) {
          const res = await admin.reqPro("warehouse/warehouse/admin/outboundOrder/selectOrderDetailRecord", {
            id: d.value
          });
          if (res.code === 200) {
            form.val("warehouseOutboundRecordForm", res.data);
            form.val("warehouseOutboundRecordForm", {
              costomerCode: obj.costomerCode,
              customerName: obj.customerName,
              numberOfMaterials: 0
            });
            skuList = res.data.warehouseOutboundOrderDetailList;

            table.reload("purchasePlanFormTable", {
              data:  res.data.warehouseProductInventoryVOList
            });
          }
        }else{
          table.reload("purchasePlanFormTable", {
            data: []
          });
          skuList = []
        }
      },
      "warehouseOutboundOrderCode"
    );
    await admin.getDictListPro("deliveryMethod", "transport_mode", "提货方式");
    laydate.render({
      elem: "#plannerdPickupTime",
      type: "datetime"
    });

    const tableVal = table.render({
      elem: "#purchasePlanFormTable",
      page: false,
      limit: 999999,
      //   height: 400,
      data: [],
      cols: [
        [
          { type: "numbers", title: "序号" },
          // { field: "sysBundleCode", align: "center", title: "唯一码" },
          { field: "userBundleCode", align: "center", title: "货主捆包号" },
          { field: "productProducer", align: "center", title: "厂家/产地" },
          { field: "productVariety", align: "center", title: "品种" },
          { field: "productMark", align: "center", title: "牌号" },
          // { field: "productBrand", align: "center", title: "品牌" },
          // { field: "productType", align: "center", title: "产品类型" },
          { field: "customerId", align: "center", title: "货权客户ID" },
          { field: "indate", align: "center", title: "货权入库日期" },
          { field: "price", align: "center", title: "托管费" },
          { field: "netWeight", align: "center", title: "净重" },
          { field: "grossWeight", align: "center", title: "毛重" },
          {
            align: "center",
            toolbar: "#purchasePlanFormTableBar",
            title: "操作",
            width: 100,
            hide: nowData.eventName === "detail"
          }
        ]
      ],
      done: function () {
        let list = table.cache["purchasePlanFormTable"];
        admin.tableInputChange("purchasePlanFormTable");
        if (nowData.eventName === "add") {
          form.val("warehouseOutboundRecordForm", {
            totalGrossWeight: list.reduce((acc, curr) => Number(acc) + Number(curr.grossWeight), 0),
            totalNetWeight: list.reduce((acc, curr) => Number(acc) + Number(curr.netWeight), 0),
            totalCustodyFee: list.reduce((acc, curr) => Number(acc) + Number(curr.price), 0),
            numberOfMaterials: list.length
          });
        }
      }
    });
    if (data && data.id) {
      form.val("warehouseOutboundRecordForm", data);
      tableVal.reload({
        data: data.warehouseOutboundRecordDetailList
      });
    } else {
    }

    form.on("submit(inquiryOrderInformationSubmit)", function (d) {
      let formData = { ...d.field };

      formData.warehouseOutboundRecordDetailList = table.cache["purchasePlanFormTable"];
      console.log(formData);

      if (nowData.eventName == "add") {
        delete formData.id;
        admin.req(
          "warehouse/warehouse/outboundRecord/add",
          JSON.stringify(formData),
          function (res) {
            layer.closeAll("loading");
            if (res.code == 200) {
              layer.msg(res.msg, { icon: 1 });
              table.reload("purchasePlanTable");
              layer.closeAll("page");
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          },
          "POST",
          false,
          "application/json"
        );
      }
      //  else if (nowData.eventName == "edit") {
      //   admin.req(
      //     "enterprise/purchase/admin/purchasePlan/update",
      //     JSON.stringify(formData),
      //     function (res) {
      //       layer.closeAll("loading");
      //       if (res.code == 200) {
      //         layer.msg(res.msg, { icon: 1 });
      //         table.reload("purchasePlanTable");
      //         layer.closeAll("page");
      //       } else {
      //         layer.msg(res.msg, { icon: 2, time: 1000 });
      //       }
      //     },
      //     "PUT",
      //     false,
      //     "application/json"
      //   );
      // }
      return false;
    });
    $("#purchasePlanSuccess").click(() => {
      const formData = nowData.data;
      formData.planInfoList = table.cache["purchasePlanFormTable"];
      formData.status = "success";
      formData.reason = $("#reason").val();
      admin.req(
        "enterprise/purchase/admin/purchasePlan/audit",
        JSON.stringify(formData),
        function (data) {
          layer.closeAll("loading");
          if (data.code == 200) {
            layer.msg(data.msg, { icon: 1, time: 500 });
            table.reload("purchasePlanTable");
            layer.closeAll("page");
          } else {
            layer.msg(data.msg, { icon: 2, time: 1000 });
          }
        },
        "POST",
        false,
        "application/json"
      );
    });
    $("#purchasePlanFail").click(() => {
      const formData = nowData.data;
      formData.planInfoList = table.cache["purchasePlanFormTable"];
      formData.status = "fail";
      formData.reason = $("#reason").val();
      admin.req(
        "enterprise/purchase/admin/purchasePlan/audit",
        JSON.stringify(formData),
        function (data) {
          layer.closeAll("loading");
          if (data.code == 200) {
            layer.msg(data.msg, { icon: 1, time: 500 });
            table.reload("purchasePlanTable");
            layer.closeAll("page");
          } else {
            layer.msg(data.msg, { icon: 2, time: 1000 });
          }
        },
        "POST",
        false,
        "application/json"
      );
    });
    table.on("tool(purchasePlanFormTable)", function (obj) {
      var d = obj.data; // 获取当前行的数据
      var layEvent = obj.event; // 获取事件名（edit 或 del）
      if (obj.tr) {
        obj.tr.on("click", function (e) {
          e.preventDefault(); // 防止默认行为
        });
      }
      if (layEvent == "del") {
        const index = $(obj.tr[0]).data("index");
        let list = table.cache["purchasePlanFormTable"].filter((v) => {
          return v["LAY_TABLE_INDEX"] != index;
        });
        table.reload("purchasePlanFormTable", {
          data: list
        });
      }
    });
    $("#Configure").click(function () {
      table.reload("purchasePlanFormTable", {
        data: skuList
      });
      // if ($("#warehouseOutboundOrderId").val()) {
      //   admin.formOpen({
      //     area: "90%",
      //     offset: "10%",
      //     title: "配置出库物料明细",
      //     path: "components/warehouse/product/warehouseOutboundOrderSkuDetails.html",
      //     success: function () {
      //       parentData.skuList = skuList;
      //       parentData.customerName = $("#customerName").val();
      //     },
      //     end: function () {
      //       let list = [...(childData.skuList ? childData.skuList : []), ...table.cache["purchasePlanFormTable"]];
      //       // 去重 id相同的对象
      //       list = list.filter((v, index, self) => index === self.findIndex((t) => t.id === v.id));
      //       table.reload("purchasePlanFormTable", {
      //         data: list
      //       });
      //     }
      //   });
      // } else {
      //   layer.msg("请选择提货订单编号", { icon: 2, time: 1000 });
      // }
    });
  });
</script>

<style>
  #warehouseOutboundRecordForm .layui-form-label {
    width: 125px;
  }

  #warehouseOutboundRecordForm .layui-input-block {
    margin-left: 155px;
  }

  #warehouseOutboundRecordForm .layui-form-item .layui-inline {
    /* margin-bottom: 5px; */
    margin-right: 0px;
  }
</style>
